<template>
  <div class="showDialog modal-xl">
    <el-dialog :title="$t('cards.card_stats')" width="90%" height="90%" :visible.sync="showDialog" :showStatistics="showStatistics" @close="$emit('update:showStatistics', false)">
     <div>
        <h2>{{$t('cards.daily_stats')}}</h2>
        <el-table class="text-center table-responsive" width="100%" thead-class="table-red" tbody-class="tbody-red" :hover="true" :striped="true" :small="false" :fixed="false" responsive="sm" 
                empty-filtered-text="There are no records matching your request" empty-text="There are no records to show" :data="cardStatsDaily">
                <el-table-column prop="total_amount" :label="$t('cards.total_amount')" width="130"></el-table-column>
                <el-table-column prop="collection_amount" :label="$t('cards.collection_amount')" width="150"></el-table-column>
                <el-table-column prop="payment_amount" :label="$t('cards.payment_amount')" width="150"></el-table-column>
                <el-table-column prop="manual_close_amount" :label="$t('cards.manual_close_amount')" width="120"></el-table-column>
                <el-table-column prop="auto_close_amount" :label="$t('cards.auto_close_amount')" width="100"></el-table-column>
                <el-table-column prop="processing_amount" :label="$t('cards.processing_amount')" width="100"></el-table-column>
                <el-table-column prop="invalid_amount" :label="$t('cards.invalid_amount')" width="75"></el-table-column>
                <el-table-column prop="total_count" :label="$t('cards.total_count')" width="65"></el-table-column>
                <el-table-column prop="collection_count" :label="$t('cards.collection_count')" width="100"></el-table-column>
                <el-table-column prop="payment_count" :label="$t('cards.payment_count')" width="90"></el-table-column>
                <el-table-column prop="manual_close_count" :label="$t('cards.manual_close_count')" width="120"></el-table-column>
                <el-table-column prop="auto_close_count" :label="$t('cards.auto_close_count')" width="150"></el-table-column>
                <el-table-column prop="processing_count" :label="$t('cards.processing_count')" width="160"></el-table-column>
                <el-table-column prop="invalid_count" :label="$t('cards.invalid_count')" width="120"></el-table-column>
        </el-table>
       <h2>{{$t('cards.weekly_stats')}}</h2>
        <el-table class="text-center table-responsive" thead-class="table-green" :hover="true" tbody-class="tbody-green" :striped="true" :small="false" :fixed="false" responsive="sm" 
                empty-filtered-text="There are no records matching your request" empty-text="There are no records to show" :data="cardStatsWeekly">
                <el-table-column prop="total_amount" :label="$t('cards.total_amount')" width="130"></el-table-column>
                <el-table-column prop="collection_amount" :label="$t('cards.collection_amount')" width="150"></el-table-column>
                <el-table-column prop="payment_amount" :label="$t('cards.payment_amount')" width="150"></el-table-column>
                <el-table-column prop="manual_close_amount" :label="$t('cards.manual_close_amount')" width="120"></el-table-column>
                <el-table-column prop="auto_close_amount" :label="$t('cards.auto_close_amount')" width="100"></el-table-column>
                <el-table-column prop="processing_amount" :label="$t('cards.processing_amount')" width="100"></el-table-column>
                <el-table-column prop="invalid_amount" :label="$t('cards.invalid_amount')" width="75"></el-table-column>
                <el-table-column prop="total_count" :label="$t('cards.total_count')" width="65"></el-table-column>
                <el-table-column prop="collection_count" :label="$t('cards.collection_count')" width="100"></el-table-column>
                <el-table-column prop="payment_count" :label="$t('cards.payment_count')" width="90"></el-table-column>
                <el-table-column prop="manual_close_count" :label="$t('cards.manual_close_count')" width="120"></el-table-column>
                <el-table-column prop="auto_close_count" :label="$t('cards.auto_close_count')" width="150"></el-table-column>
                <el-table-column prop="processing_count" :label="$t('cards.processing_count')" width="160"></el-table-column>
                <el-table-column prop="invalid_count" :label="$t('cards.invalid_count')" width="120"></el-table-column>
        </el-table>
         <h2>{{$t('cards.monthly_stats')}}</h2>
        <el-table class="text-center table-responsive" thead-class="table-blue" :hover="true" tbody-class="tbody-blue" :striped="true" :small="false" :fixed="false" responsive="sm" 
                empty-filtered-text="There are no records matching your request" empty-text="There are no records to show" :data="cardStatsMonthly">
              <el-table-column prop="total_amount" :label="$t('cards.total_amount')" width="130"></el-table-column>
                <el-table-column prop="collection_amount" :label="$t('cards.collection_amount')" width="150"></el-table-column>
                <el-table-column prop="payment_amount" :label="$t('cards.payment_amount')" width="150"></el-table-column>
                <el-table-column prop="manual_close_amount" :label="$t('cards.manual_close_amount')" width="120"></el-table-column>
                <el-table-column prop="auto_close_amount" :label="$t('cards.auto_close_amount')" width="100"></el-table-column>
                <el-table-column prop="processing_amount" :label="$t('cards.processing_amount')" width="100"></el-table-column>
                <el-table-column prop="invalid_amount" :label="$t('cards.invalid_amount')" width="75"></el-table-column>
                <el-table-column prop="total_count" :label="$t('cards.total_count')" width="65"></el-table-column>
                <el-table-column prop="collection_count" :label="$t('cards.collection_count')" width="100"></el-table-column>
                <el-table-column prop="payment_count" :label="$t('cards.payment_count')" width="90"></el-table-column>
                <el-table-column prop="manual_close_count" :label="$t('cards.manual_close_count')" width="120"></el-table-column>
                <el-table-column prop="auto_close_count" :label="$t('cards.auto_close_count')" width="150"></el-table-column>
                <el-table-column prop="processing_count" :label="$t('cards.processing_count')" width="160"></el-table-column>
                <el-table-column prop="invalid_count" :label="$t('cards.invalid_count')" width="120"></el-table-column>
        </el-table>
      </div>
      <br>
    <el-button @click="showDialog = false">{{$t('cards.close')}}</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
    name: 'UserSet',
    data() {
      return {
        showDialog: this.showStatistics,
        cardStatsDaily: [],
        cardStatsWeekly: [],
        cardStatsMonthly: []
      }
    },
    methods: {
         ...mapActions('cards', {
            getDailyCardStats: 'getDailyCardStats',
            getWeeklyCardStats: 'getWeeklyCardStats',
            getMonthlyCardStats: 'getMonthlyCardStats'
        })
    },
    watch: {
        dailycardstats: function(){
             this.cardStatsDaily.push(this.dailycardstats)
        },
        weeklycardstats: function(){
             this.cardStatsWeekly.push(this.weeklycardstats)
        },
        monthlycardstats: function(){
             this.cardStatsMonthly.push(this.monthlycardstats)
        }
    },
    computed: {
     ...mapState(
                {
                  dailycardstats: state => state.cards.dailycardstats,
                  weeklycardstats: state => state.cards.weeklycardstats,
                  monthlycardstats: state => state.cards.monthlycardstats
                }
              )
    },
    props: {
      showStatistics: {
           default: false
        },
        cardCode: {
              type: String
        }
    },
    created(){
    if (this.cardCode) {
        this.getDailyCardStats(this.cardCode)
        this.getWeeklyCardStats(this.cardCode)
        this.getMonthlyCardStats(this.cardCode)
        }
    }
}
</script>
